<template>
  <el-table :data="columnData" row-key="prop" style="width: 100%" border>
    <!-- <el-table-column prop="" label="排序" width="58">
      <el-tag class="move" style="cursor: move;">
        <el-icon style="cursor: move;"><el-icon-d-caret/></el-icon>
      </el-tag>
    </el-table-column> -->
      <el-table-column prop="label" label="列名">
      <template #default="scope">
        <el-tag round :effect="scope.row.hide?'light':'dark'" :type="scope.row.hide?'info':''">{{scope.row.label}}</el-tag>
      </template>
    </el-table-column>
      <el-table-column prop="hide" label="显示" width="60">
      <template #default="scope">
        <el-switch v-model="scope.row.hide" size="small" :active-value="false" :inactive-value="true" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {ref} from 'vue'

// eslint-disable-next-line no-undef
const props = defineProps({
  column: { 
    type: Array, 
    default: () => [] 
  }
})

const columnData = ref(props.column)
</script>
